<template>
  <div v-show="isVisible" class="overlay">
    <!-- 这里是覆盖层的内容 -->
    <h2 class="title">扫我分享朋友圈</h2>
    <!-- 二维码生成 -->
    <canvas id="QRCode_header" style="width: 280px; height: 280px"/>
  </div>
</template>
 
<script setup>
import {onMounted} from "vue";
import QRCode from "qrcode";
 
defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  }
})
 
onMounted(() => {
  getQRCode();
})
const getQRCode = function () {
  //生成的二维码为URL地址js
  const  qrUrl = "https://www.baidu.com";
  const opts = {
    errorCorrectionLevel: "H", //容错级别
    type: "image/png", //生成的二维码类型
    quality: 0.3, //二维码质量
    margin: 0, //二维码留白边距
    width: 160, //宽
    height: 160, //高
    text: "二维码内容", //二维码内容
    color: {
      dark: "#000", //前景色
      light: "#fff", //背景色
    },
  };
 
  const msg = document.querySelector("#QRCode_header");
  // 将获取到的数据（val）画到msg（canvas）上
  QRCode.toCanvas(msg, qrUrl, opts, (error) => {
    if (error) {
      console.log("二维码加载失败", error);
      alert("二维码加载失败");
    }
  });
}
</script>
 
<style scoped>
.title{
  text-align: center;
}
.overlay {
  background-color: beige;
  width: 100%;
  height: 100%;
  z-index: 1000 !important; /* 确保覆盖层在其他内容之上 */
}
</style>